<template>
    <div class="app-container">
        <ul class="appminTop">
            <li>
                <h2>元数据</h2>
                <div>20/350</div>
                <p>昨日新增/总数</p>
            </li>
            <li>
                <h2>字段</h2>
                <div>20/350</div>
                <p>昨日新增/总数</p>
            </li>
            <li>
                <h2>业务数据</h2>
                <div>20/350</div>
                <p>昨日新增/总数</p>
            </li>
            <li>
                <h2>项目</h2>
                <div>20/350</div>
                <p>昨日新增/总数</p>
            </li>
            <li>
                <h2>应用</h2>
                <div>20/350</div>
                <p>昨日新增/总数</p>
            </li>
        </ul>
        <el-container>
            <el-aside width="400px">
                <h2 class="h2Style">最新元数据TOP10</h2>
                <ul class="mainLeft">
                    <li>
                        <span>1</span>
                        <i>XXXXXXX元数据1</i>
                    </li>
                    <li>
                        <span>2</span>
                        <i>XXXXXXX元数据1</i>
                    </li>
                    <li>
                        <span>3</span>
                        <i>XXXXXXX元数据1</i>
                    </li>
                    <li>
                        <span>4</span>
                        <i>XXXXXXX元数据1</i>
                    </li>
                    <li>
                        <span>5</span>
                        <i>XXXXXXX元数据1</i>
                    </li>
                    <li>
                        <span>1</span>
                        <i>XXXXXXX元数据1</i>
                    </li>
                    <li>
                        <span>6</span>
                        <i>XXXXXXX元数据1</i>
                    </li>
                    <li>
                        <span>7</span>
                        <i>XXXXXXX元数据1</i>
                    </li>
                    <li>
                        <span>8</span>
                        <i>XXXXXXX元数据1</i>
                    </li>
                    <li>
                        <span>9</span>
                        <i>XXXXXXX元数据1</i>
                    </li>
                    <li>
                        <span>10</span>
                        <i>XXXXXXX元数据1</i>
                    </li>

                </ul>
            </el-aside>
            <el-main>
                <div class="elminTop">
                    <ul>
                        <li class="topListOne">
                            <h2 class="h2Style">元数据来源</h2>
                            <div class="tableScrooll">
                                <div class="pieStyle" id="pie"></div>
                                <ul>
                                    <li class="Added">
                                        <p>300个</p>
                                        <span>内部</span>
                                    </li>
                                    <li class="amend">
                                        <p>50个</p>
                                        <span>第三方</span>
                                    </li>

                                </ul>
                            </div>
                        </li>
                        <li class="topListOne">
                            <h2 class="h2Style">元数据类型</h2>
                            <div class="tableScrooll">
                                <div class="barStyle" id="bar"></div>
                            </div>
                        </li>
                        <li class="topListOnes">
                            <h2 class="h2Style">元数据变更</h2>
                            <div class="tableScrooll">
                                <div class="pieStyle" id="pietwo"></div>
                                <ul>
                                    <li class="Addeds">
                                        <p>86.55%</p>
                                        <span>新增</span>
                                    </li>
                                    <li class="amends">
                                        <p>12.80%</p>
                                        <span>修改</span>
                                    </li>
                                    <li class="deletes">
                                        <p>0.65%</p>
                                        <span>删除</span>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="elminBootm">
                    <ul>
                        <li class="topListTwo">
                            <h2 class="h2Style">元数据变更情况统计
                                <el-button type="primary" plain>本月</el-button>
                        <el-button plain>本周</el-button>
                        <el-date-picker v-model="value4" type="datetimerange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                            </h2>
                            <div class="tableScrooll">
                                <div class="linStyleOne" id="lineOne"></div>                     
                            </div>
                        </li>
                        <li class="topListTwos">
                            <h2 class="h2Style">最新元数据分析</h2>
                            <ul class="mainLefts">
                    <li>
                        <span>1</span>
                        <i>XXXXXXX元数据1</i>
                    </li>
                    <li>
                        <span>2</span>
                        <i>XXXXXXX元数据1</i>
                    </li>
                    <li>
                        <span>3</span>
                        <i>XXXXXXX元数据1</i>
                    </li>
                </ul>
                        </li>
                    </ul>
                </div>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import * as echarts from "echarts";
export default {
    name: "generalization",
    components: {

    },
    data() {
        return {
            value4: [],
        };
    },
    mounted() {
        //一进来加载饼状图
        this.myPie();
        //柱状图
        this.myBar();
        this.pietwo();
          //第一个折线图
          this.myLineOne();
    },
    methods: {
        myPie() {
            var myChart = echarts.init(document.getElementById("pie"));
            myChart.setOption({
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                series: [
                    {
                        name: "Access From",
                        type: "pie",
                        radius: "70%",
                        avoidLabelOverlap: false,
                        label: {
                            //去掉引导线
                            normal: {
                                show: false,
                            },
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            { value: 1048 },
                            { value: 735 },
                            { value: 580 },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                            },
                        },
                    },
                ],
            });
        },
        pietwo() {
            var myChart = echarts.init(document.getElementById("pietwo"));
            myChart.setOption({
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                series: [
                    {
                        name: "Access From",
                        type: "pie",
                        radius: "70%",
                        avoidLabelOverlap: false,
                        label: {
                            //去掉引导线
                            normal: {
                                show: false,
                            },
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            { value: 1048 },
                            { value: 735 },
                            { value: 580 },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                            },
                        },
                    },
                ],
            });
        },
        myBar() {
            var myChart = echarts.init(document.getElementById("bar"));
            myChart.setOption({
                xAxis: {
                    type: 'category',
                    data: ['普通', '子表', '单例',]
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [75, 20, 5],
                        type: 'bar'
                    }
                ]
            });
        },
        myLineOne() {
            var myChart = echarts.init(document.getElementById("lineOne"));
            myChart.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['20220806', '20220807', '20220808', '20220809', '20220810', '20220811', '20220812']
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: false //去掉折线图中的横线
                    }
                },
                grid: {
                    height: '60%',
                },
                series: [
                    {
                        name: 'Email',
                        type: 'line',
                        stack: 'Total',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: 'Union Ads',
                        type: 'line',
                        stack: 'Total',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: 'Video Ads',
                        type: 'line',
                        stack: 'Total',
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: 'Direct',
                        type: 'line',
                        stack: 'Total',
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: 'Search Engine',
                        type: 'line',
                        stack: 'Total',
                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                    }
                ]
            })
        },
    }
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
@import "~@/assets/styles/CommonStyle.scss";
ul{
    padding: 0;
}
.appminTop {
    margin: 0 40px;
    height: 120px;
    margin-bottom: 15px;
    padding: 0;

    li {
        border: 1px solid #ccc;
        float: left;
        margin-top: 15px;
        width: 278px;
        height: 100px;
        margin-right: 20px;

        h2 {
            font-size: 18px;
            padding-left: 10px;
        }

        div {
            text-align: right;
            margin-right: 20px;
            margin-bottom: 5px;
        }

        p {
            text-align: right;
            margin-right: 20px;
        }
    }

}

.el-container {
    margin: 0 40px;
}

.el-aside {
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 0;
    .mainLeft {
        padding: 0 20px;

        span {
            margin-right: 30px;
        }

        li {
            height: 55px;
            line-height: 55px;

            i {
                font-style: normal;
            }
        }
    }
}
.mainLefts{
    padding:0 30px;
span {
    margin-right: 30px;
}

li {
    height: 55px;
    line-height: 55px;

    i {
        font-style: normal;
    }
}
}
.el-main {
    padding: 0 20px 20px 20px;
}

.elminTop {
    height: 350px;
    width: 100%;
    margin-bottom: 15px;

    .topListOne {
        list-style: none;
        float: left;
        width: 330px;
        height: 330px;
        border: 1px solid #ccc;
        margin-right: 30px;
    }
    .topListOnes{
        list-style: none;
        float: left;
        width: 330px;
        height: 330px;
        border: 1px solid #ccc; 
    }
}


.h2Style {
    font-size: 18px;
    height: 50px;
    border-bottom: 1px solid #ccc;
    padding-left: 15px;
    line-height: 50px;
}

.pieStyle {
    width: 200px;
    height: 200px;
}

.barStyle {
    width: 300px;
    height: 250px;
}

.tableScrooll {
    padding: 10px 0;
    height: 275px;
    position: relative;

    ul {
        list-style: none;

        li {
            p {
                display: inline-block;
                margin-right: 15px;
                font-size: 22px;
                font-weight: 500;
            }
        }
    }
}

.Added {
    position: absolute;
    top: 80px;
    right: 20px;

}

.amend {
    position: absolute;
    top: 120px;
    right: 20px;
}
.Addeds {
    position: absolute;
    top: 40px;
    right: 10px;

}

.amends {
    position: absolute;
    top: 80px;
    right: 10px;
}

.deletes {
    position: absolute;
    top: 120px;
    right: 10px;
}
.elminBootm {
    height: 340px;
    width: 100%;
}
.topListTwo{
        list-style: none;
        float: left;
        width: 610px;
        height: 340px;
        border: 1px solid #ccc;
        margin-right: 30px; 
}
.topListTwos{
        list-style: none;
        float: left;
        width: 410px;
        height: 340px;
        border: 1px solid #ccc;
        overflow-y: auto;
}
.linStyleOne {
    width: 570px;
    height: 240px;
}
::v-deep .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner{
    width: 230px;
    margin-left: 10px;
}
</style>